﻿<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Base.Master" Inherits="System.Web.Mvc.ViewPage(Of DailyReport.BusinessChartModel)" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    BusinessChart
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%
        'Dim nbcm As Ext.Net.MenuItem
        'For Each b As DailyReport.BusinessItem In DailyReport.DailyReportCommon.GetBusinessList.BusinessList
        '    nbcm = New Ext.Net.MenuItem With {.Text = b.Name, .ID = String.Concat("bcm_", b.Value), .Icon = Icon.ShapeAlignBottom}
        '    BusinessChartMenu.Add(nbcm)
        'Next
    
        'btnBusinessChart.Text = Model.BusinessName
    %>
    <script type="text/javascript" src="/content/jquery.PrintArea.js"></script>

    <ext:Viewport ID="ViewPort1" runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Header="false" Border="false">
                <TopBar>
                    <ext:Toolbar ID="toolbar1" runat="server">
                        <Items>
                            <%--<ext:TabStrip ID="TabStrip1" runat="server">
                                <Items>
                                    <ext:TabStripItem ActionItemID="pnlChart" runat="server" Title="图表" />
                                    <ext:TabStripItem ActionItemID="pnlGrid" runat="server" Title="报表" />
                                </Items>
                            </ext:TabStrip>
                            <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />--%>
                            <%--<ext:SelectBox ID="sltRange" runat="server" DisplayField="text" ValueField="value">
                                <Store>
                                    <ext:Store runat="server" ID="dcRange">
                                        <Proxy>
                                            <ext:HttpProxy runat="server" Url="/Setting/ReportRange.xml" />
                                        </Proxy>
                                        <Reader>
                                            <ext:XmlReader Record="item">
                                                <Fields>
                                                    <ext:RecordField Name="value" Mapping="@value" />
                                                    <ext:RecordField Name="text" Mapping="@text" />
                                                </Fields>
                                            </ext:XmlReader>
                                        </Reader>
                                        <Listeners>
                                            <Load Handler="sltRange.selectFirst();" />
                                        </Listeners>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Fn="rangeSelected" />
                                </Listeners>
                            </ext:SelectBox>--%>
                            <%--<ext:Button ID="btnBusinessChart" runat="server" Text="业务量比较" Icon="ChartBar">
                                <Menu>
                                    <ext:Menu ID="BusinessChartMenu" runat="server">
                                        <Listeners>
                                            <Click Fn="showBusinessChart" />
                                        </Listeners>
                                    </ext:Menu>
                                </Menu>
                            </ext:Button>--%>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="btnPrint" runat="server" Text="打印图表" Icon="Printer">
                                <Listeners>
                                    <Click Handler="PrintChart();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Text="下载图表" Icon="Disk">
                                <Listeners>
                                    <Click Handler="ExportChart();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="pnlChart" runat="server" Header="false" BodyBorder="false" Frame="false" ForceLayout="true">
                        <Content>
                            <div id="container" style="width: 100%; height: 510px; margin: 0 auto">
                            </div>
                        </Content>
                    </ext:Panel>
                    <%--<ext:Panel ID="pnlGrid" runat="server" Header="false" BodyBorder="false" Frame="false"
                        Layout="FitLayout">
                        <Content>
                            <ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="Business" Header="false"
                                Border="false" TrackMouseOver="true" StripeRows="true" Layout="FitLayout">
                                <Store>
                                    <ext:Store ID="dcWorkloadProportionStore" runat="server" UseIdConfirmation="true">
                                        <Proxy>
                                            <ext:HttpProxy Url="/Day/WorkloadProportionStore/" />
                                        </Proxy>
                                        <BaseParams>
                                            <ext:Parameter Name="range" Value="_range" Mode="Raw" />
                                        </BaseParams>
                                        <Reader>
                                            <ext:JsonReader IDProperty="id" Root="data" TotalProperty="total">
                                                <Fields>
                                                    <ext:RecordField Name="Business" />
                                                    <ext:RecordField Name="Count" />
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
                                        <SortInfo Field="Business" Direction="DESC" />
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModel1" runat="server">
                                    <Columns>
                                        <ext:RowNumbererColumn Width="25" Resizable="false" />
                                        <ext:Column ColumnID="business" DataIndex="Business" Header="业务" Width="200" />
                                        <ext:Column ColumnID="count" DataIndex="Count" Header="宗数" Width="200"  />
                                        <ext:Column ColumnID="countP" DataIndex="Count" Header="百分比" Width="200" >
                                            <Renderer Handler="return (Dig2Per(value) + '%');" />
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                </SelectionModel>
                                <LoadMask ShowMask="true" />
                                <SaveMask ShowMask="true" />
                            </ext:GridPanel>
                        </Content>
                    </ext:Panel>--%>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderArea" runat="server">
    <script type="text/javascript" src="/content/jquery.min.js"></script>
    <script type="text/javascript" src="/content/highcharts.js"></script>
    <script type="text/javascript" src="/content/modules/exporting.js"></script>
    <script type="text/javascript">
        var chart;
        $(document).ready(function () {
            DrawChart();
        });
    </script>
    <% 
        Dim mt As String = "["
        Dim bt As String = ""
        Dim md As String = "["
        For Each c In Model.ChartItems
            mt += String.Concat("'", c.UserName, "',")
            md += String.Concat(c.Count, ",")
        Next
        If md.EndsWith(",") Then
            mt = mt.Substring(0, mt.Length - 1)
            md = md.Substring(0, md.Length - 1)
        End If
        md += "]"
        mt += "]"
        bt = Model.BusinessName
    %>
    <script type="text/javascript" language="javascript">
        var mt = eval("<%=mt %>");
        var bt = '<%=bt %>';
        var md = eval("<%=md %>");
    </script>
    <script type="text/javascript" language="javascript">
        var _proportiondata = null;
        var _proportiontotal = null;
        //var _range = 1;
        var _rangestart = new Date('<%= Model.RangeStart.toString("MM/dd/yyyy")%>');
        var _rangeend = new Date('<%= Model.RangeEnd.toString("MM/dd/yyyy")%>');
        var _level = '<%=ViewData("Level") %>';
        function DrawChart() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column',
                    margin: [50, 50, 100, 80]
                },
                title: {
                    text: [formatCNDate(_rangestart), '至 ', formatCNDate(_rangeend), bt + formatVNLevel(_level) + '业务量比较', ].join(' ')
                },
                xAxis: {
                    categories: mt,
                    labels: {
                        rotation: -45,
                        align: 'right',
                        style: {
                            font: 'normal 13px Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '业务宗数（宗）'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
								 '一审: ' + Highcharts.numberFormat(this.y, 1) +
								 ' 宗';
                    }
                },
                series: [{
                    name: '一审',
                    data: md, //[10, 20, 30, 40, 50, 60],
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        x: -6,
                        y: 10,
                        formatter: function () {
                            return this.y;
                        },
                        style: {
                            font: 'normal 13px Verdana, sans-serif'
                        }
                    }
                }],
                credits: {
                    enabled: false
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                exporting: {
                    enableImages: true,
                    filename: ['BusinessChart_Output_', formatDate(_rangestart, ''), '_', formatDate(_rangeend, '')].join(''),
                    type: 'image/jpeg',
                    width: 1024
                }
            });
        }

        var rangeSelected = function (item, record, index) {
            chart.destroy();
            DrawChart();
        }

        function ExportChart() {
            chart.exportChart(null, {
                chart: {
                    backgroundColor: '#FFFFFF'
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                }
            });
        }

        function PrintChart() {
            chart.print();
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="StartupArea" runat="server">
</asp:Content>
